<template>
	<view class="bg">
		<view class="top_search">
			<u-search placeholder="请输入搜索内容" v-model="keyword" shape='square' bg-color='rgba(255, 255, 255, 1)'
				:show-action='false'></u-search>
		</view>
		<view class="task_bg">
			<view class="checkbox_one">
				<u-checkbox shape="circle" @change="checkedAll" v-model="selectAll">
					<view class="checkbox_Style">全选</view>
				</u-checkbox>
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<view v-for="(item, index) in list" :key="index" class="checkbox_one">
					<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name" shape="circle">
						<view class="checkbox_Style">{{item.name}}</view>
					</u-checkbox>
					<view>
						<text :class="item.checked ? 'Select_font' : 'unSelect_font'">{{item.num}}</text>
						<u-icon name="arrow-right" color="rgba(142, 156, 179, 1)"></u-icon>
					</view>
				</view>
			</u-checkbox-group>
			<view class="sub_title_vice">常选对象</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<view v-for="(item, index) in oftenArr" :key="index" class="checkbox_one">
					<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name" shape="circle">
						<view class="checkbox_Style">
							<view class="round_bg">
								<image src="../../../static/images/common/head.jpg" mode=""></image>
							</view>
							<view>
								<view class="font1">{{item.name}}</view>
								<view class="font2">{{item.position}}</view>
							</view>
						</view>
					</u-checkbox>
					<u-icon name="arrow-right" color="rgba(142, 156, 179, 1)"></u-icon>
				</view>
			</u-checkbox-group>
		</view>
		<view class="bottom_num">
			<view class="left_font">已选择：5人</view>
			<view class="right_font">确定(5/30)</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				selectAll: false,
				oftenArr: [
					{ name: '苏小星',position: '办公室主任',checked: false,},
					{ name: '苏小星',position: '办公室主任',checked: false,},
					{ name: '苏小星',position: '办公室主任',checked: false,},
					{ name: '苏小星',position: '办公室主任',checked: false,},
				],
				list: [{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
					{
						name: '永泰县委办公室',
						checked: false,
						disabled: false,
						num: 5
					},
				]
			}
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				if (this.selectAll) {
					this.list.map(val => {
						val.checked = false;
					})
				} else {
					this.list.map(val => {
						val.checked = true;
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom_num {
		width: 100vw;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;

		.left_font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3074FF;
		}

		.right_font {
			height: 60rpx;
			background: #3074FF;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FEFEFE;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
		}
	}

	.top_search {
		width: 100vw;
		height: 120rpx;
		background-color: #3988FF;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;

		.search_screening {
			margin-left: 2%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.font {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, .7);
			}
		}
	}

	.popupModel {
		position: relative;
		padding-top: 48rpx;

		.task_left_top {
			position: absolute;
			top: 0;
			left: 0;
			min-width: 150rpx;
			height: 48rpx;
			background: rgba(48, 116, 255, 0.2);
			border-radius: 24rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3074FF;
				padding: 0 20rpx;
			}

			.task_round {
				width: 48rpx;
				height: 48rpx;
				background: #3074FF;
				z-index: 999;
				box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.popupContent {
			padding: 24rpx;

			.Content {
				width: 100%;
				display: flex;
				align-items: center;

				.name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #272B32;
				}
			}
		}
	}

	.task_bg {
		margin-top: 120rpx;
		margin-bottom: 98rpx;

		.checkbox_one {
			width: 100%;
			background-color: white;
			padding: 26rpx 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.checkbox_Style {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				.round_bg{
					width: 90rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(214,227,255,1);
					border-radius: 50%;
					margin-right: 30rpx;
				}
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.font1{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #585F6B;
				}
				.font2{
					background: rgba(48, 116, 255, .2);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #3074FF;
					padding: 0 10rpx;
				}
			}
			.unSelect_font{
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #8E9CB3;
				margin-right: 20rpx;
			}
			.Select_font{
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(57, 136, 255, 1);
				margin-right: 20rpx;
			}
		}

		.task_one {
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;
			position: relative;
			margin-bottom: 40rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
			border-radius: 24rpx 8rpx 8rpx 8rpx;
		}

		.task_left_top {
			position: absolute;
			top: 0;
			left: 0;
			min-width: 252rpx;
			height: 48rpx;
			background: rgba(48, 116, 255, 0.2);
			border-radius: 24rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3074FF;
				padding: 0 20rpx;
			}

			.task_round {
				width: 48rpx;
				height: 48rpx;
				background: #3074FF;
				z-index: 5;
				box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.task_content {
			width: 100%;
			margin-top: 40rpx;

			.task_btnArr {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 40rpx;
			}

			.task_btn {
				background: #3074FF;
				border-radius: 4rpx;
				padding: 8rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				.more {
					width: 24rpx;
					height: 6rpx;
					margin-right: 10rpx;
				}

				.font {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, .7);
				}
			}

			.task_name {
				display: flex;
				padding-bottom: 40rpx;
			}

			.task_child {
				padding: 20rpx 0;
				border-top: 1rpx solid rgba(231, 233, 240, 1);
				border-bottom: 1rpx solid rgba(231, 233, 240, 1);
			}

			.task_test {
				display: flex;
				margin: 20rpx 0;
			}

			.task_left {
				flex: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8E9CB3;
			}

			.nameFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272B32;
			}

			.task_right {
				flex: 7;
				display: flex;
				align-items: center;

				.childFont {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #272B32;
				}

				.zt_type1 {
					margin-left: 10rpx;
					background: #F85F78;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, .7);
					padding: 0 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.zt_type2 {
					margin-left: 10rpx;
					background: rgba(250, 173, 51, 1);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, .7);
					padding: 0 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}
	}
</style>
